<script setup >
import { ref, reactive } from "vue";
import { NButton } from "naive-ui";
import { orderStatus } from "@/api/constants";
const emit = defineEmits(["on-cancel", "on-confirm"]);
defineProps({
  order: {
    type: Object,
    default: {},
  },
});
</script>

<template>
  <div class="detail-action" v-if="order">
    <div class="state">
      <span class="iconfont icon-YUAN-circle-fill"></span>
      <p>{{ orderStatus[order.orderState].label }}</p>
    </div>
    <div class="info">
      <p>订单编号: &nbsp;{{ order.id }}</p>
      <p>下单时间: &nbsp;{{ order.createTime }}</p>
    </div>
    <div class="btn">
      <!-- 待付款 -->
      <template v-if="order.orderState === 1">
        <n-button
          @click="$router.push(`/member/pay?orderId=${order.id}`)"
          type="primary"
          size="small"
          >立即付款</n-button
        >
        <n-button type="gray" size="small" @click="$emit('on-cancel', order)"
          >取消订单</n-button
        >
      </template>
      <!-- 待发货 -->
      <template v-if="order.orderState === 2">
        <n-button
          type="primary"
          size="small"
          @click="$router.push(`/member/checkout?orderId=${order.id}`)"
          >再次购买</n-button
        >
      </template>
      <!-- 待收货 -->
      <template v-if="order.orderState === 3">
        <n-button
          type="primary"
          size="small"
          @click="$emit('on-confirm', order)"
          >确认收货</n-button
        >
        <n-button
          @click="$router.push(`/member/checkout?orderId=${order.id}`)"
          type="plain"
          size="small"
          >再次购买</n-button
        >
      </template>
      <!-- 待评价 -->
      <template v-if="order.orderState === 4">
        <n-button
          type="primary"
          size="small"
          @click="$router.push(`/member/checkout?orderId=${order.id}`)"
          >再次购买</n-button
        >
        <n-button type="plain" size="small">评价商品</n-button>
        <n-button type="gray" size="small">申请售后</n-button>
      </template>
      <!-- 已完成 -->
      <template v-if="order.orderState === 5">
        <n-button
          type="primary"
          size="small"
          @click="$router.push(`/member/checkout?orderId=${order.id}`)"
          >再次购买</n-button
        >
        <n-button type="plain" size="small">查看评价</n-button>
        <n-button type="gray" size="small">申请售后</n-button>
      </template>
    </div>
  </div>
</template>

<style scoped lang='less'>
.detail-action {
  height: 180px;
  width: 100%;
  display: flex;
  align-items: center;
  .state {
    width: 220px;
    text-align: center;
    .iconfont {
      font-size: 40px;
      color: @xtxColor;
    }
    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
  }
  .info {
    width: 240px;
    line-height: 30px;
    p {
      color: #999;
    }
  }
  .btn {
    flex: 1;
    text-align: right;
    margin-right: 100px;
    .n-button {
      margin-left: 20px;
    }
  }
}
</style>